<template>
	<view class="page">
		<view class="box">
			<view class="header-box">
				<head-left-nav text-content="我的" :title-color="'#303133'" :is-back-show="false"></head-left-nav>
			</view>
			<view class="user-box flex flexColumn">
				<view class="left flex alignC">
					<view class="header_box">
						<image class="header_img" :src="ylUserInfo.image ? ylUserInfo.image : '/static/logo.png'" mode=""></image>
					</view>
					<view class="info_box" @click="toPage('/subpkg/userInfo/userInfo?type=userInfo')">
						<view style="font-size: 34rpx;color: #303133;"
							>
							<span v-if="ylUserInfo.nickName">{{ ylUserInfo.nickName }}</span>
							<span v-else-if="ylUserInfo.username">微信用户</span>
							<span v-else @click.stop="toPage('/subpkg/login/login')">点击微信授权</span>
						</view>
						<view style="font-size: 28rpx;color: rgba(48, 49, 51, .5);margin-top: 10rpx;">
							个人信息<u-icon name="arrow-right" color="rgba(48, 49, 51, .5)" size="22" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
				
				<view style="margin: 32rpx;">
					<text style="font-size: 24rpx;color: #575757;margin-right: 20rpx;">我的答题</text>
					<text style="font-weight: bold;font-size: 40rpx;color: #000000;">18</text>
				</view>
			</view>
			<view class="body-box">
				<view class="common_box">
					<view class="topheader"></view>
					<view class="indet flexColumn ">
						<view class="allOrder flex alignC">
							<text style="font-size: 30rpx;color: #303133;font-weight: 500;font-family: PingFangSC;">快捷工具</text>
						</view>
						<view class="flex fjb">
							<view class="indet-item" v-for="(item,index) in indetList" @click="toIndent(item.status)"
								:key="index">
								<image :src="item.iconUrl" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cell-box">
					<view class="my-item" @click="toPage('/subpkg/aboutUs/aboutUs')">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/about_icon.png"></image>
							<text>关于我们</text>
						</view>
						<u-icon name="arrow-right" color="#303133" size="24"></u-icon>
					</view>
					<view class="my-item" @click="showPopup = true">
						<view style="display: flex;align-items: center;">
							<image class="my-item-image" src="/static/my/kefu_icon.png"></image>
							<text>联系客服</text>
						</view>
						<u-icon name="arrow-right" color="#303133" size="24"></u-icon>
					</view>
				</view>
			</view>
			
			
		</view>
		<u-popup v-model="showPopup" mode="center" border-radius="36" closeable="true">
			<view class="popupBox flex flexColumn fcenter">
				<view class="popupTitle">请选择您要联系的客服</view>
				<view class="popupSubTitle"> 我们根据选择为您提供服务 </view>
				<view class="popupQrcode">
					<image src="/static/kefu.jpg" mode=""></image>
				</view>
				<view class="popupTel flex fcenter">
					<image class="tel_icon" src="/static/my/tel_icon.png" mode=""></image>
					<view class="flex flexColumn">
						<view style="font-size: 32rpx;color: #262626;margin-bottom: 10rpx;">电话客服</view>
						<view style="font-size: 24rpx;color: #ACACAC;">15592700062</view>
					</view>
				</view>
				<view class="popupBtn flex fcenter" @click="showPopup = false">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserInfoApi,
		getAccessTokenApi,
		getminiCodeApi
	} from '../../common/api/userInfoApi.js'
	import {
		getClassApi
	} from '../../common/api/goodsApi.js'
	import {
		getOrderCountApi
	} from '../../common/api/orderApi.js'
	import headLeftNav from '@/components/HeadLeftNav.vue';
	export default {
		components: {headLeftNav},
		data() {
			return {
				showPopup: false,
				list: ['收藏', '关注', '积分', '优惠券'],
				wh: 0,
				userInfo: {},
				capsule: {},
				indetList: [{
						name: '地址管理',
						iconUrl: '/static/my/icon1.png'
					}, {
						name: '头像管理',
						iconUrl: '/static/my/icon2.png',
					},
					{
						name: '昵称管理',
						iconUrl: '/static/my/icon3.png',
					}
				],
				cellList: [{
						name: '关于我们',
						url: '/subPackages/healthRecord/healthRecord'
					},
					{
						name: '联系客服',
						url: '/subPackages/kinship/kinship'
					}
				],
				CodeUrl: '',
				MyClass: [],
				show: false,
				content: '是否确认退出登录',
				isVolunteer: false,
				volunteerType: '3' // 护工1， 用户2
			};
		},
		computed: {
			...mapState('user', ['ylPhone', 'ylUserId', 'ylUserInfo', 'ylToken', 'ylEnterprise'])
		},
		methods: {
			...mapMutations('user', ['MusetUserId', 'MusetUserInfo', 'MudelToken']),
			handleChange(data) {
				const index = data.detail.index
			},
			// 切换身份
			toggleIdentity() {
				let volunteerType = uni.getStorageSync('volunteerType')
				if(volunteerType == '1'){
					uni.setStorageSync('volunteerType', '2')
					
				} else {
					uni.setStorageSync('volunteerType', '1')
				}
				this.volunteerType = uni.getStorageSync('volunteerType')
			},
			toVolunteer() {
				if(!uni.getStorageSync('ylToken')) {
					return uni.$showMsg('用户未登录，请先登录')
				}else if(this.ylUserInfo.volunteerStatus == '0') {
					return uni.$showMsg('审核中...')
				} else if(this.ylUserInfo.volunteerStatus == '2'){
					return uni.$showMsg('审核拒绝')
				} else {
					uni.navigateTo({
						url: '/subPackages/porter/porter'
					})
				}
			},
			async getUserInfo(callback) {
				const res = await getUserInfoApi()
				if (res.status === 200) {
					this.MusetUserInfo(res.data)
				} else {
					wx.showToast({
						title: res.message
					})
					wx.hideToast()
				}
				callback && callback()
			},
			toPage(path) {
				wx.navigateTo({
					url: path
				})
			},
			toIndent(status) {
				wx.navigateTo({
					url: `/subPackages/indent/indent?status=${status}`
				})
			},
			async getMyClass(callback) {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, '2')
				if (res.status === 200) {
					this.MyClass = res.data
				} else {
					uni.$showMsg(res.message)
				}
				callback && callback()
			},
			async getOrderCount() {
				const res = await getOrderCountApi()
				const allCount = Object.values(res.data.allCount)[0]
				const waitPayCount = Object.values(res.data.waitPayCount)[0]
				const waitShippedCount = Object.values(res.data.waitShippedCount)[0]
				const waitReceivedCount = Object.values(res.data.waitReceivedCount)[0]
				const refundPayCount = Object.values(res.data.refundPayCount)[0]
				this.indetList[0].count = waitPayCount
				this.indetList[1].count = waitShippedCount
				this.indetList[2].count = waitReceivedCount
				this.indetList[3].count = refundPayCount
				this.indetList[4].count = allCount
			},
			tosubPackages() {
				uni.navigateTo({
					url: '/subPackages/integral/integral'
				})
			},
			toMember() {
				uni.navigateTo({
					url: '/subPackages/member/member'
				})
			},
			toPages(index) {
				switch (index) {
					case 0:
						break;
					case 1:
						break;
					case 2:
						// uni.navigateTo({
						// 	url: '/subPackages/integral/integral'
						// })
						break;
					case 3:
						break;
				}
			},
			async logout() {
				this.show = true;
			},
			confirm() {
				uni.reLaunch({
					url: '/pages/home/home'
				})
				this.MudelToken()
			},
			toDeclaration() {
				uni.navigateTo({
					url: '/subPackages/declaration/declaration'
				})
			}
		},
		async onShow() {
			if (uni.getStorageSync('ylToken')) {
				this.getOrderCount()
				// this.getMyClass()
				this.getUserInfo()
				if (this.ylUserInfo.type != '1') {
					this.isVolunteer = true
					if(uni.getStorageSync('volunteerType')) {
						this.volunteerType = uni.getStorageSync('volunteerType')
					} else {
						this.volunteerType = 1
						uni.setStorageSync('volunteerType', this.volunteerType)
					}
				}
			}
		},
		onLoad() {
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
		},
		async onPullDownRefresh() {
			await this.getOrderCount()
			// await this.getMyClass(uni.stopPullDownRefresh)
		}

	}
</script>

<style>
	page {
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.popupBox{
		width: 586rpx;
		height: 716rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		.popupTitle{
			font-size: 36rpx;
			color: #262626;
		}
		.popupSubTitle{
			font-size: 24rpx;
			color: #ACACAC;
			margin: 20rpx 0;
		}
		.popupTel{
			width: 498rpx;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 32rpx;
			margin: 40rpx 0;
			// padding: ;
			.tel_icon{
				width: 64rpx;
				height: 64rpx;
				margin-right: 20rpx;
			}
		}
		.popupQrcode{
			width: 190rpx;
			height: 190rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.popupBtn{
			width: 460rpx;
			height: 80rpx;
			background: #3FBEBB;
			border-radius: 59rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
	
	.common_box{
		position: relative;
		background: #fff;
		border-radius: 32rpx;
		margin-bottom: 32rpx;
		.topheader{
			position: absolute;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			width: 100%;
			height: 106rpx;
			opacity: 0.4;
			background: linear-gradient(180deg, rgba(48,202,181,0.25) 0%, rgba(255,255,255,0) 100%);
		}
		.cate_icon{
			width: 60rpx;height: 60rpx;
			margin-bottom: 10rpx;
		}
	}
	.cell-box{
		background: #fff;
		border-radius: 24rpx;
		// padding: 32rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.user-box {
		margin-top: 150rpx;
		position: absolute;
		top: 80rpx;
		width: 100%;
		.left{
			.header_box{
				.header_img {
					width: 128rpx;
					height: 128rpx;
					margin: 0 32rpx;
					border-radius: 50%;
					position: relative;
				}
				.identity_img{
					position: absolute;
					top: -25rpx;
					left: 40rpx;
					width: 110rpx;
					height: 60rpx;
				}
			}
			
		}
		.right{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image{
				width: 88rpx;
				height: 88rpx;
			}
			.service{
				margin-right: 30rpx;
			}
			.mes{
				position: relative;
				.dot{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					width: 12rpx;
					height: 12rpx;
					background: #FF7B40;
					border-radius: 50%;
				}
			}
		}
	
	}
	
	.identity_img{
		
		.img{
			
		}
	}
	.header-box {
		 background: linear-gradient( 180deg, #D5F0F0 0%, rgba(248,248,248,0) 100%);;
		width: 100%;
		height: 654rpx;
		background-size: 100% 100%;
	}

	.indet {
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 32rpx;

		.allOrder {
			padding-bottom: 40rpx;
			font-size: 34rpx;
			justify-content: space-between;
		}

		.indet-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 8rpx;

			image {
				width: 88rpx;
				height: 88rpx;
			}
			text {
				margin-top: 20rpx;
				font-size: 22rpx;
				color: #4D4D4D;
			}
		}
	}
	.body-box {
		border-radius: 20rpx 20rpx 0 0;
		margin: -180rpx 32rpx 32rpx 32rpx;
		// background: #fff;
	}

	/deep/ .uni-grid-item--border-top {
		border: 0;
	}

	.box {
		button {
			margin: 0 30rpx;
		}
	}



	/deep/ .uni-grid {
		border: 0;
	}


	

	
	.my-item {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin: 24rpx 0rpx;

		// image {
		// 	width: 44rpx;
		// 	height: 44rpx;
		// 	opacity: .8;
		// }

		text {
			margin-left: 32rpx;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.worker-tag-v {
		position: absolute;
		top: 6rpx;
		width: 72rpx;
		height: 34rpx;
		background: #FF7B40;
		border-radius: 20rpx 20rpx 20rpx 0rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 24rpx;
		align-items: center;
	}
</style>